<template>
	<view class="page-balance p12">
		<view class="module-card c255">
			<image src="../../../static/image/bg-balance.png" style="width: 100%;" mode="widthFix"></image>
			<view class="card-content p16">
				<view class="u-flex u-f-jsb mt0">
					<view class="fz16">
						我的钱包
					</view>
					<view @click="toPage('/pages/user/balance/withdraw')" class="btn-ti u-flex u-f-justify brs3 fz12">提现<u-icon class="fz12 ml3" name="arrow-right"
							color="#F7684C"></u-icon></view>
				</view>
				
				<view class="u-flex u-f-jsb fz12 mt40" style="text-align: center;">
					<view>
						<view class="fz18">{{userInfo.totalRecharge ||0 }}</view>
						累计总收入(元)
					</view>
					<view>
						<view class="fz18">{{userInfo.balance || 0}}</view>
						当前余额(元)
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="bg-white p10 mt15 u-flex module-tab" style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">
			<view class="u-f1 item fz14 c6" :class="curTab==1?'on':''" @click="toTab(1)">收入</view>
			<view class="u-f1 item fz14 c6" :class="curTab==2?'on':''" @click="toTab(2)">支出</view>
		</view>
		<view class="bg-white p12 mt15" style="box-shadow: 0px 4px 10px 0px rgba(230,219,209,0.25);">
			<view class="u-flex u-f-jsb bm pt2 pb12">
				<span>金额</span>
				<span>事件</span>
			</view>
			<view class="p8 pt15 pb15" style="font-size: 22rpx;" v-for="(item,index) in dataList" :key="index">
				<view class="u-flex u-f-jsb">
					<span>{{item.bizTypeName}}</span>
					<span class="price">{{item.price}}</span>
				</view>
				<view class="u-flex u-f-jsb mt8" style="align-items: flex-start;">
					<span class="c9 fz12" >{{curTab==1?item.title:''}}</span>
					<span class="c9 fz12" style="min-width: 160rpx;text-align: right;">{{item.createTimeFormat}}</span>
				</view>
			</view>
			
			<view class="">
			
				<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
			</view>
			<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
				暂无数据！
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getPlatform
	} from '@/config/util.js'
	export default {
		data() {
			return {
				current: 0,
				dataList:[],
				userInfo:{},
				loadStatus: 'more',
				scrollHeight: 300,
				page: 1,
				info:{},
				curTab:1
			};
		},

			// 页面下拉到底部触发
			onReachBottom() {
				if (this.loadStatus == 'more') {
					this.getData()
				}
			},
		methods: {
			toTab(e){
				this.curTab=e
				this.initData()
			},
			
			initData() {
				this.page = 1
				this.dataList = []
				this.getData()
			
			},
			getData() {
				let post = {
					pageNo: this.page,
					type:this.curTab,
					pageSize: 20
				}
				this.$api.walletList(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			getInfo(){
				
				
				
				this.$api.getPerFormance({}, (res) => {
					if (res.code == 200) {
						this.info = res.data
					}
				})
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.isLogin = true
							this.userInfo = res.data;
						}
					})
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			},
			
		},
		onShow: function() {
			if (this.$db.get("userToken")) {
				this.getInfo()
				this.initData()
			}
		}
	};
</script>

<style lang="scss">
	.btn {
		background: rgba(242, 70, 70, 0.1);
		color: #F24646;

		height: 86upx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.module-card {
		position: relative;

		.card-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
	}

	.btn-ti {
		color: #F7684C;
		padding: 14rpx 40rpx;
		background: #fff;
		box-shadow: 0px 8px 16px 0px #F7684C;
	}
	.module-tab{
		text-align: center;
		.item{
			padding: 20rpx;
			&.on{
				background: #F24646;
				color: #fff;
			}
		}
	}
</style>